@layout("/common/_container.html"){
<style>
    .ui-state-default {
        height: 40px;
        background: #fff;
        border: 1px solid aliceblue;
        line-height: 40px;
        border-radius: 3px;
        margin-bottom: 2px;
        width: 50%;
    }

    .ui-state-default:hover {
        cursor: pointer;
    }

    .title {
        background: #000;
        color: #fff;
    }

    .sortLeft {
        padding-right: 20px;
    }

    .sortRight {
        padding-right: 20px;
    }

    .ui-sortable {
        /*float: right;*/
    }

    .right_box {
        width: 330px;
        height: 400px;
        position: absolute;
        top: 57px;
        left: 590px;
        border: 1px solid #1E84C6;
    }

    .selectStyles{
        width: 60%;height: 20px;border: 1px solid #DDDDDD;border-radius: 2px;
    }
</style>
<div class="ibox float-e-margins">
    <div style="display: none">
        <input type="hidden" id="sortMap" value="">
        <input type="hidden" id="reservationsId" value="${reservationsId}">
        <input type="hidden" id="customerId" value="${customerId}">
        <input type="hidden" id="operationTime" value="${operationTime}">
        <input type="hidden" id="id2" value="${rechargeInfo.id}">
        <input type="hidden" id="getTime" value="${getTime}">
        <input type="hidden" id="payorrefund" value="${payorrefund}">
        <input type="hidden" id="startTime" value="">
        <input type="hidden" id="endTime" value="">

        <input type="hidden" id="totleFoldingPay" value="${totleFoldingPay}"/>
        <input type="hidden" id="totleServiceActualPay" value="${totleServiceActualPay}"/>
        <input type="hidden" id="serviceActualPay" value="${serviceActualPay}"/>
    </div>
    <div class="ibox-content">
        <div class="form-horizontal" id="addForm">

            <div class="row">
                <div class="col-sm-12 proSort">
                    <div class="panel-body">
                        <span id="moneyShou"> </span>
                    </div>
                    <div style="width:640px;height:265px;overflow:auto;" class="panel panel-success sortRight">
                        <div style="margin-top: 10px;" class="way clearfix">
                            <div class="col-sm-4" style="width: 24%">
                                <select class="selectBox checkoutMethodName selectStyles" style="width: 100%"  name="checkoutMethodName" >
                                    @for(item in checkoutMethodInfo){
                                    <option value="${item.checkoutMethod}">${item.checkoutMethod}</option>
                                    @}
                                </select>
                            </div>
                            <div class="col-sm-4">
                                <span>金额 :</span>
                                <input class="amountOfBalance2 selectStyles" name="amountOfBalance2" />
                            </div>
                            <div class="col-sm-4">
                                <span>备注 :</span>
                                <input class="remarks selectStyles" name="remarks" />
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <p class="clearfix"><a href="javascript:;" style="float: right" class="addway">添加</a></p>
                        </div>
                    </div>
                    <#button btnCss="info" name="提交" id="ensure" icon="fa-check"  clickFun="Recharge.addBalance()"/>
                    <#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="parent.layer.close(parent.layer.getFrameIndex(window.name))"/>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    #ar{
        display: inline-block;
        position: absolute;
        right: 10px;
    }
    .arTwo_bt{
        outline: none;
        border: none;
        padding: 0 ;
        display: inline-block;
        width: 60px;
        height: 25px;
        line-height: 25px;
        border-radius: 20px;
        background: url("${ctxPath}/static/img/y102.png");
        background-size: cover;
        text-align: center;
        color: white;
    }
    .sort_li{
        display: inline-block;
    }
</style>
<link rel="stylesheet" href="${ctxPath}/static/css/jqui/jquery-ui.min.css">
<script src="${ctxPath}/static/js/jquery-ui.min.js"></script>
<script src="${ctxPath}/static/modular/arrival/customer/recharge.js"></script>
<script>

    var serviceActualPay = $("#serviceActualPay").val();
    var payorrefund = document.getElementById('payorrefund').value;   //退款还是结账
    if (payorrefund == '退款') {
        serviceActualPay = serviceActualPay.substring(1);
        document.getElementById('moneyShou').innerText="退款金额："+serviceActualPay+"元";
    }else if(payorrefund == '结账'){
        document.getElementById('moneyShou').innerText="结账金额："+serviceActualPay+"元";
    }

    $(".addway").click(function () {
        var way = $(".way").eq(0).clone();
        $(this).parent().parent().before(way)
    });
</script>
@}
